@extends('layouts.back_stage')
@section('content')
    <style>
        .addCode{float:right;margin-right:30px;}

        .shopBg{background:#fff;overflow: hidden;margin:20px 0 10px 0;}
        .tableBg{padding:30px;background:#fff;}

        .input-item{width:200px;padding-right: 0;margin:20px 10px 20px 0;}
        .timeDuan{margin:20px 0;}
        .input-time{width:220px;margin-right:10px;}
        .pagination-box{text-align: center;box-sizing:border-box;margin-top:20px;}
        .el-range-editor--small.el-input__inner{width:300px;}
        .el-date-editor .el-range-separator{padding:0 15px}
        .el-textarea{width:400px;}
        ::-webkit-scrollbar {height: 8px;}
        .el-select .el-input .el-select__caret.el-input__icon{line-height:22px;}
        .el-table--mini.opTb th{padding:0;}
        .touching{float:right;margin-right:30px;}
        .el-button+.el-button.picking{float:right;margin-right:15px;margin-left:0;}
        /*汇总*/
        .huiRow{float:left;width:16.666%;height:70px;line-height:70px;text-align:center;border-right:1px solid #6C6A6C;}
        .huiRow label,.huiRow .laDiv{height:35px;line-height:35px;float:left;width: 100%;font-size:16px;}
        .el-table .bgred{background:#7ccafa;}
        .el-table .bgYellow{background:#e99f96;}
        .spTip{width:20px;height:20px;display:inline-block;margin:0 5px 0 20px;}
        ::-webkit-scrollbar {height: 8px;}
        .el-table tr:hover>td{background:initial !important;}
        .el-table tr.current-row>td{background:initial !important;}
        .el-table--striped .el-table__body tr.el-table__row--striped.current-row td, .el-table__body tr.current-row>td, .el-table__body tr.hover-row.current-row>td, .el-table__body tr.hover-row.el-table__row--striped.current-row>td, .el-table__body tr.hover-row.el-table__row--striped>td, .el-table__body tr.hover-row>td{background:initial !important;}
        [v-cloak] {display: none;}
    </style>

    <div class="container">
        <div style="padding:20px 20px 20px 0;overflow:hidden;"><h3 style="float:left;">订单配发</h3></div>
        <!-- 主体-->
        <div class="page-body">
            <div class="row app" id="shopInfos" v-cloak>
                <el-button class="touching" type="primary" size="small" @click="overPei">取消配货</el-button>
                <el-button class="picking" type="primary" size="small" @click="jieSuPei">结束配货</el-button>
                <div class="col-md-12 row row-table-box">
                    <div class="shopBg">
                        <div class="row" style="margin-top:10px;padding:6px 30px;min-height:90px;background:#fff;">
                            <label>销售季节：</label>
                            <el-select v-model="sale_season_id" filterable placeholder="请选择销售季节" size="small" style="width:200px;">
                                <el-option v-for="item in options1" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                            <label>品牌：</label>
                            <el-select v-model="brand_id" filterable placeholder="请选择品牌" size="small" style="width:200px;">
                                <el-option v-for="item in options2" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                            <label>发货仓库：</label>
                            <el-select v-model="factory_id" filterable placeholder="请选择发货仓库" size="small" style="width:200px;">
                                <el-option v-for="item in options3" :key="item.id" :label="item.type" :value="item.id"></el-option>
                            </el-select>
                            <el-button type="primary" size="small" @click="grabble('reset')">搜索</el-button>
                            <el-button type="primary" size="small" @click="resetSou('reset')">重置</el-button>
                        </div>
                    </div>
                    <div class="shopBg" style="margin-top:10px;padding:15px 30px;height:100px;background:#fff;">
                        <div class="huiRow">
                            <label>单据数</label>
                            <div class="laDiv">@{{ countNum }}</div>
                        </div>
                        <div class="huiRow">
                            <label>未发数/件</label>
                            <div class="laDiv">@{{ noSend_nums }}</div>
                        </div>
                        <div class="huiRow">
                            <label>分配数量/件</label>
                            <div class="laDiv">@{{ distr_num }}</div>
                        </div>
                        <div class="huiRow">
                            <label>所需资金/元</label>
                            <div class="laDiv">@{{ need_price }}</div>
                        </div>
                        <div class="huiRow">
                            <label>可用货款/元</label>
                            <div class="laDiv">@{{ need_price }}</div>
                        </div>
                        <div class="huiRow" style="border-right:none;">
                            <label>配货总余额/元</label>
                            <div class="laDiv">@{{ need_price }}</div>
                        </div>
                    </div>
                    <div style="width:100%;height:auto;float:left;background:#fff;">
                        <div class="tableBg" style="margin-top:10px;">
                            <p style="height:20px;line-height:20px;display: inline-flex;float: right;">
                                <span class="spTip" style="background:#7ccafa;"></span>配发中
                                <span class="spTip" style="background:#e99f96;"></span>已结束
                            </p>
                            <el-table :data="tableInfo" size="mini" border @selection-change="handleSelectionChange" @filter-change="filterChange" tooltip-effect="dark" :row-class-name="tableRowClassName">
                                <el-table-column type="selection" width="55"></el-table-column>
                                <el-table-column prop="loop" label="序号" width="50" :resizable='false'></el-table-column>
                                <el-table-column prop="type" label="单据类型" width="90" :resizable='false'></el-table-column>
                                <el-table-column prop="client_name" label="客户" min-width="160" :resizable='false'></el-table-column>
                                <el-table-column prop="noSend" label="订单未发/件" min-width="100" :resizable='false'></el-table-column>
                                <el-table-column prop="order_distribute_nums" label="分配数量/件" min-width="100" :resizable='false'></el-table-column>
                                <el-table-column prop="order_distribute_price" label="所需资金/元" min-width="100" :resizable='false'></el-table-column>
                                <el-table-column prop="remark" label="可用货款/元" min-width="100" :resizable='false'></el-table-column>
                                <el-table-column prop="remark" label="配货总余额/元" min-width="100" :resizable='false'></el-table-column>
                                <el-table-column prop="order_num" label="单据号" min-width="100" :resizable='false'></el-table-column>
                                <el-table-column prop="status" label="配发状态" min-width="90" :resizable='false' column-key="status" :filters="[{ text: '未配发', value: '0' }, { text: '配发中', value: '1' }, { text: '已结束', value: '-1' }]">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.status===0">未配发</span>
                                        <span v-if="scope.row.status===1">配发中</span>
                                        <span v-if="scope.row.status===-1">已结束</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="founder" label="制单人" min-width="100" :resizable='false'></el-table-column>
                                <el-table-column prop="created_at" label="制单时间" min-width="160" :resizable='false'></el-table-column>
                                <el-table-column label="操作" fixed="right" width="100">
                                    <template slot-scope="scope">
                                        <div >
                                            <el-button v-if="" type="text" size="small" @click="peiFa(scope)">配发</el-button>
                                            <el-button v-if="" type="text" size="small" @click="chaKan(scope)">查看</el-button>
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div class="pagination-box">
                                <el-pagination @size-change="handleSizeChange" :page-sizes="[10,50,100,200]" :page-size="10" @current-change="changePageSkip" :current-page.sync="currentPage" :total="total" layout="sizes,prev, pager, next" background></el-pagination>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /主体-->
    </div>
    <script>
        new Vue({
            el: '#shopInfos',
            data:{
                /*搜索条件*/
                options1:[],//销售季节存储
                sale_season_id:'',//销售季节
                options2:[],//品牌存储
                brand_id:'',//品牌
                options3:[],//发货仓库
                factory_id:'',//仓库
                status:'',//配发状态

                tableInfo:[], //表单数据
                total:1,  //table总条数
                page:10,//每页多少条
                currentPage:1, //table当前页数


                //汇总
                countNum:'',//单据数
                noSend_nums:'',//总未发数
                distr_num:'',//总分配数
                need_price:'',//总所需金额

                sizeGr:[],//尺码数据
                ids:'',//多选框ids
                client_ids:'',//多选框client_id拼起来

                //验证数据用
                statusArr:[],//配发状态数组

                jieSuPeiFlag:true,
                overPeiFlag:true,
            },
            mounted(){
                this.common();
                this.bases();
            },
            methods:{
                /*尺码数据*/
                common(){
                    var that=this;
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                        },
                        type: 'post',
                        url: '/distribution/sizeGroupHead',
                        data: {
                            type:1,
                        },
                        success: function (data) {
                            //console.log(data);
                            if(data.result.success){
                                that.sizeGr=data.content.vertical;
                            }else{
                                that.$notify.error({
                                    title: '提示',
                                    message: data.result.errorMsg,
                                });
                            }
                        }
                    });
                },
                //基本信息
                bases(){
                    var that = this;
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                        },
                        type: 'post',
                        url: '/allotment-manager/order-allotment-condition',
                        data: {
                            type:1,
                        },
                        success: function (data) {
                            //console.log(data);
                            if(data.result.success){
                                that.options1 = data.content.sale_season;
                                that.options2 = data.content.brand;
                                that.options3 = data.content.factory_type;

                                that.sale_season_id=data.content.condition.sale_season_id;
                                that.brand_id=data.content.condition.brand_id;
                                that.factory_id=data.content.condition.factory_type;
                                if(data.content.condition.sale_season_id!='' || data.content.condition.brand_id || data.content.condition.factory_type!=''){
                                    that.grabble();
                                }
                            }else{
                                that.$notify.error({
                                    title: '提示',
                                    message: data.result.errorMsg,
                                });
                            }
                        }
                    });
                },
                //获取数据
                grabble(type){
                    var that = this;
                    if(this.sale_season_id=='' && this.brand_id==''){
                        that.$notify.error({
                            title: '提示',
                            message: "请选择销售季节或者品牌",
                        });
                        return false;
                    }
                    if(this.factory_id==''){
                        that.$notify.error({
                            title: '提示',
                            message: "请选择发货仓库",
                        });
                        return false;
                    }
                    let skip;
                    if(type == 'reset'){
                        skip = 0;
                    }else{
                        skip = that.currentPage-1;
                    }
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                        },
                        type: 'post',
                        url: '/allotment-manager/order-allotment-list',
                        data: {
                            skip:skip,
                            page:that.page,
                            sale_season_id:that.sale_season_id,
                            brand_id:that.brand_id,
                            factory_type:that.factory_id,
                            status:that.status,
                        },
                        success: function (data) {
                            //console.log(data);
                            if(data.result.success){
                                var opt=[];
                                let i = 0;
                                for(var value of data.content.data){
                                    i++;
                                    opt.push({
                                        'id':value.id,
                                        'loop':i+( Number(that.page)*skip),
                                        'type':'批发销售单',
                                        'client_name':value.client_name,
                                        'noSend':Number(value.orderNums)-Number(value.order_distribute_nums),
                                        'order_distribute_nums':value.order_distribute_nums,
                                        'order_distribute_price':value.order_distribute_price,
                                        'created_at':value.created_at,
                                        'remark':value.remark,
                                        'order_num':value.order_num,
                                        'founder':value.founder,
                                        'created_at':value.created_at,
                                        'status':value.status,
                                    })
                                }
                                that.countNum=data.content.total;
                                that.noSend_nums=Number( data.content.orderNums )-Number( data.content.order_distribute_nums );
                                that.distr_num=data.content.order_distribute_nums;
                                that.need_price=data.content.order_distribute_price;

                                that.tableInfo = opt;
                                that.total = data.content.total;
                                that.currentPage = data.content.skip;
                            }else{
                                that.$notify.error({
                                    title: '提示',
                                    message: data.result.errorMsg,
                                });
                            }
                        }
                    });
                },
                /*重置*/
                resetSou(){
                    this.sale_season_id='';
                    this.brand_id='';
                    this.factory_id='';
                    this.grabble();
                },
                /*每页条数*/
                handleSizeChange(val) {
                    this.page=val;
                    this.grabble('reset');
                    //console.log(`每页 ${val} 条`);
                },
                changePageSkip(val){
                    //console.log(val);
                    this.currentPage = val;
                    this.grabble();
                },
                /*多选*/
                handleSelectionChange(val){
                    if(val.length>0){
                        var st='';
                        var sts='';
                        this.statusArr=[];
                        for(var value of val){
                            st=st+value.client_id+',';
                            sts=sts+value.id+',';
                            this.statusArr.push(value.status);
                        }
                        this.client_ids=st.substr(0, st.length - 1);
                        this.ids=sts.substr(0, sts.length - 1);
                    }else{
                        this.client_ids='';
                        this.ids='';
                        this.statusArr=[];
                    }
                },
                /*配发*/
                peiFa(scope){
                    if(this.brand_id==undefined){
                        this.brand_id='';
                    }
                    window.location.href='/allotment-manager/order-allotment-seach/'+scope.row.id+'?sale_season_id='+this.sale_season_id+'&brand_id='+this.brand_id+'&factory_id='+this.factory_id+'&is_modify=1';
                },
                /*查看*/
                chaKan(scope){
                    if(this.brand_id==undefined){
                        this.brand_id='';
                    }
                    window.location.href='/allotment-manager/order-allotment-seach/'+scope.row.id+'?sale_season_id='+this.sale_season_id+'&brand_id='+this.brand_id+'&factory_id='+this.factory_id+'&is_modify=0';
                },
                /*结束配货*/
                jieSuPei(){
                    var that=this;
                    var arrs=this.statusArr;
                    for(let n=0;n<arrs.length;n++){
                        if(arrs[n]!=1){
                            this.$notify.error({
                                title: '提示',
                                message: "未配发或已结束的订单不能结束配货",
                            });
                            return false;
                        }
                    }
                    if(that.client_ids==''){
                        this.$notify.error({
                            title: '提示',
                            message: "至少选择一项结束配货",
                        });
                        return false;
                    }
                    const h = this.$createElement;
                    this.$msgbox({
                        title: '提示',
                        message: h('p', null, [
                            h('span', null, '是否确认所选订单结束配货?'),
                        ]),
                        showCancelButton: true,
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                        beforeClose: (action, instance, done) => {
                            if (action === 'confirm') {
                                if(that.jieSuPeiFlag==true){
                                    that.jieSuPeiFlag=false;
                                    $.ajax({
                                        headers: {
                                            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                                        },
                                        type: 'post',
                                        url: '/allotment-manager/close-order-distribution',
                                        data: {
                                            client_ids:that.client_ids,
                                            ids:that.ids,
                                        },
                                        success: function (data) {
                                            //console.log(data);
                                            if(data.result.success){
                                                that.$notify.success({
                                                    title: '提示',
                                                    message: "操作成功"
                                                });
                                                done();
                                                that.grabble('reset');
                                                that.jieSuPeiFlag=true;
                                            }else{
                                                that.$notify.error({
                                                    title: '错误',
                                                    message: data.result.errorMsg
                                                });
                                                that.jieSuPeiFlag=true;
                                            }
                                        }
                                    })
                                }
                            } else {
                                done();
                            }
                        }
                    }).then(action => {

                    });
                },
                /*取消配货*/
                overPei(){
                    var that=this;
                    var arrs=this.statusArr;
                    for(let n=0;n<arrs.length;n++){
                        if(arrs[n]!=1){
                            this.$notify.error({
                                title: '提示',
                                message: "未配发或已结束的订单不能取消配货",
                            });
                            return false;
                        }
                    }
                    if(that.client_ids==''){
                        this.$notify.error({
                            title: '提示',
                            message: "至少选择一项取消配货",
                        });
                        return false;
                    }
                    const h = this.$createElement;
                    this.$msgbox({
                        title: '提示',
                        message: h('p', null, [
                            h('span', null, '是否确认所选订单取消配货?'),
                        ]),
                        showCancelButton: true,
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                        beforeClose: (action, instance, done) => {
                            if (action === 'confirm') {
                                if(that.overPeiFlag==true){
                                    that.overPeiFlag=false;
                                    $.ajax({
                                        headers: {
                                            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                                        },
                                        type: 'post',
                                        url: '/allotment-manager/cancle-order-distribution',
                                        data: {
                                            client_ids:that.client_ids,
                                            ids:that.ids,
                                        },
                                        success: function (data) {
                                            //console.log(data);
                                            if(data.result.success){
                                                that.$notify.success({
                                                    title: '提示',
                                                    message: "操作成功"
                                                });
                                                done();
                                                that.grabble('reset');
                                                that.overPeiFlag=true;
                                            }else{
                                                that.$notify.error({
                                                    title: '错误',
                                                    message: data.result.errorMsg
                                                });
                                                that.overPeiFlag=true;
                                            }
                                        }
                                    })
                                }
                            } else {
                                done();
                            }
                        }
                    }).then(action => {

                    });
                },
                /*背景颜色*/
                tableRowClassName({row, rowIndex}){
                    if(row.status == 0){
                        return ""
                    }else if(row.status == 1){
                        return "bgred"
                    }else if(row.status == -1){
                        return "bgYellow"
                    }
                    return ''
                },
                /*状态搜索*/
                filterChange(filters){
                    //console.log(filters)
                    if(filters.status!=undefined){
                        var fil=filters.status;
                        var stas1='';
                        for(let d=0;d<fil.length; d++){
                            stas1=stas1+fil[d]+',';
                        }
                        this.status=stas1.substr(0, stas1.length - 1);
                        this.grabble('reset');
                    }
                },
            }
        });
    </script>
@endsection
